{% extends "pages-base.html" %}
{% block css %}
<script src="/static/js/jquery.cookie.js"></script>
<style>
    h1 {
        text-align: center;
    }

    form {
        width: 100%;
        margin: auto;
        padding: 20px 50px;
        border: 1px solid #e9e9e9;
        border-radius: 10px;
        display: block;
    }

    input {
        font-size: 24px;
        margin: 10px;
    }

    .clear {
        clear: both;
    }

    .speed_box {
        width: 100%;
        height: 20px;
        display: none;
        border: 1px solid #0091f2;
        border-radius: 10px;
        overflow: hidden;
    }

    #speed {
        width: 0;
        height: 100%;
        background: #0091f2;
        color: white;
        text-align: center;
        line-height: 20px;
        font-size: 16px;
    }

    #file_size, #file_type {
        display: inline-block;
        padding: 0px 16px;
        font-size: 16px;
        color: #0091f2;
        font-weight: bold;
    }

    #file_type {
        margin-top: 30px;
    }

    .opts_btn {
        position: relative;
        display: inline-block;
        padding: 8px 16px;
        font-size: 16px;
        color: white;
        text-decoration: none;
        background: #0091f2;
        border: 2px solid #0091f2;
        border-radius: 3px;
        cursor: pointer;
        overflow: hidden;
    }

    .oFile {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 10;
        top: 0px;
        left: 0px;
        opacity: 0;
    }

    .send_btn {
        display: inline-block;
        display: none;
        float: right;
        margin-top: 20px;
        padding: 8px 16px;
        font-size: 16px;
        color: white;
        background: #0091f2;
        border: 1px solid transparent;
        border-radius: 2px;
        cursor: pointer;
    }
</style>
{% endblock %}

{% block content %}
<div class="panel-heading">
    <h3 class="panel-title">项目上线</h3>
</div>
<div class="tab-base">

    <!--Nav Tabs-->
    <ul class="nav nav-tabs" id="deploy-online-tabs">
        {% for p in allProjects %}
        {% if forloop.first %}
        <li class="active">
            <a data-toggle="tab" href="#deploy-online-tab-1" class="deploy-project-tab1" proid="{{ p.id }}"
               prowner="{{ request.session.user_id }}">
                {{ p.projectName }}
                <p>{{p.projecthost.hostPublicIP }}:{{ p.projecthost.hostSSHPort }}</p></a>
        </li>
        {% else %}
        <li>
            <a data-toggle="tab" href="#deploy-online-tab-1" class="deploy-project-tab2" proid="{{ p.id }}"
               prowner="{{ request.session.user_id }}">{{ p.projectName }}<p>
                {{p.projecthost.hostPublicIP }}:{{ p.projecthost.hostSSHPort }}</p></a>
        </li>
        {% endif %}
        {% endfor %}
    </ul>
    <!--Tabs Content-->
    <div class="tab-content">
        <div id="deploy-online-tab-1" class="tab-pane fade active in">
            <div class="panel-body">
                <form action="" method="" enctype="multipart/form-data">
                    <a class="opts_btn" href="JavaScript:void(0)">
                        <label id="opst_txt">选择上传文件</label><input type="file" id="oFile" class="oFile"
                                                                  name="codefile"
                                                                  onchange="FileChangeFn(event)"/>
                    </a>
                    <label id="file_size"></label><br/><br/>
                    <!--<div id="file_box"></div>-->
                    <div class="speed_box">
                        <div id="speed">0%</div>
                    </div>
                    <label id="file_type"></label>
                    <button type="button" class="send_btn" onclick="UploadFileFn()">开始上传文件</button>
                    <div class="clear"></div>
                </form>
            </div>
            <!-- Striped Table -->
            <!--===================================================-->
            <div class="panel-body">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>代码</th>
                            <th>上线状态</th>
                            <th>上线时间</th>
                        </tr>
                        </thead>
                        <tbody id="deploy-online-detailtable">

                        </tbody>
                    </table>
                </div>
            </div>
            <!--===================================================-->
            <!-- End Striped Table -->

        </div>
    </div>
    <!--END Tabs Content-->
</div>
<!--end Nav Tabs-->

{% endblock %}


{% block js %}
<script>
    //文件选择完毕时
    function FileChangeFn(event) {
        $('.opst_txt').text('重新选择文件');
        $('.send_btn').show();
        var event = event || window.event,
                ofile = $("#oFile").get(0).files[0],
                //otype = ofile.type || '获取失败',
                osize = ofile.size / 1054000,
                ourl = window.URL.createObjectURL(ofile); //文件临时地址
        //$('#file_type').text("选择上传文件类型：" + otype);
        $('#file_size').text("选择上传文件" + ofile.name + ", 大小:" + osize.toFixed(2) + "MB。");

        console.log("文件大小：" + osize); //文件大小

    }
    //侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
    function OnProgRess(event) {
        var event = event || window.event;
        //console.log(event);  //事件对象
        console.log("已经上传：" + event.loaded); //已经上传大小情况(已上传大小，上传完毕后就 等于 附件总大小)
        //console.log(event.total);  //附件总大小(固定不变)
        var loaded = Math.floor(100 * (event.loaded / event.total)); //已经上传的百分比
        $("#speed").html(loaded + "%").css("width", loaded + "%");
    }
    //上传成功后清除上传信息
    function clearmsg() {
        var obj = setInterval(function () {  //设置定时器
            for (i = 1; i < 4; i++) {
                if (i == 2) {
                    $('#file_size').text('');
                    $('.speed_box').css('display', 'none');
                    $('#speed').text('0%');
                    $('.send_btn').hide()
                    clearInterval(obj);  //取消定时器

                }
            }

        }, 5000);

    }

    //开始上传文件
    function UploadFileFn() {
        $('.speed_box').show();
        var csrftoken = $.cookie('csrftoken');
        var liobj = $('#deploy-online-tabs .active a');
        var onlineproid = liobj.attr('proid');
        var onlineownerid = liobj.attr('prowner');
        var onlineHostIP = liobj.find('p').text().trim();
        var oFile = $("#oFile").get(0).files[0];//input file标签
        var formData = new FormData(); //创建FormData对象
        var xhr = $.ajaxSettings.xhr(); //创建并返回XMLHttpRequest对象的回调函数(jQuery中$.ajax中的方法)
        formData.append("codefile", oFile); //将上传name属性名(注意：一定要和 file元素中的name名相同)，和file元素追加到FormData对象中去
        formData.append("onlineproid", onlineproid);
        formData.append("onlineownerid", onlineownerid);
        formData.append("onlineHostIP", onlineHostIP);

        $.ajax({
            type: "POST",
            url: '/deploy/onlineupload/', // 后端服务器上传地址
            data: formData, // formData数据
            cache: false, // 是否缓存
            async: true, // 是否异步执行
            headers: {'X-CSRFToken': csrftoken},
            processData: false, // 是否处理发送的数据  (必须false才会避开jQuery对 formdata 的默认处理)
            contentType: false, // 是否设置Content-Type请求头
            xhr: function () {
                if (OnProgRess && xhr.upload) {
                    xhr.upload.addEventListener("progress", OnProgRess, false);
                    return xhr;
                }
            },
            success: function (returndata) {
                $("#speed").html("上传成功");
                liobj.click();
                clearmsg();
                //alert(returndata);
            },
            error: function (returndata) {
                $("#speed").html("上传失败");
                clearmsg();
                console.log(returndata);
                //alert('请正确配置后台服务！');
            }
        });
    }
</script>
<script src="/static/js/deploy-online.js"></script>
{% endblock %}
